<template>
  <div>
    <div class="change_subject">
      <el-button type="primary" plain @click="alterupadet">文件导入</el-button>
       <router-link :to="'/teacher/course/add'">
          <el-button type="primary" plain >手动添加</el-button>
       </router-link>
      
      <el-button type="primary" plain @click="removeSelectAll">批量删除</el-button>
    </div>
     <div class="look_subject">
        <el-table
        :data="tableData"
        style="width: 100%">
          <el-table-column type="selection" width="55" >  
          </el-table-column>
          <el-table-column
            prop="subjectId"
            label="课题编号"
            width="200">
          </el-table-column>
          <el-table-column
            prop="subjectName"
            label="课题名称"
            width="250">
          </el-table-column>
          <el-table-column
            prop="primaryNum"
            label="预选人数"
            >
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="300">
            <template slot-scope="scope">
              <router-link :to="'/teacher/course/edit/'+scope.row.subjectId">
              <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
              </router-link>
              
              <el-button type="text" size="small" @click="removesubject(scope.row.subjectId)">删除</el-button>
            </template>
           </el-table-column>
        </el-table>
     </div>
     <div class="file_upload">
       <el-dialog
        title="提示"
        :visible.sync="centerDialogVisible"
        width="30%"
        center>
        <el-upload
        class="upload-demo"
        ref="upload"
        action="https://jsonplaceholder.typicode.com/posts/"
        :file-list="fileList"
        :auto-upload="false"
        :before-remove="beforeRemove"
        :http-request="getFile"
        >
          <el-button size="small" type="primary">选择文件</el-button>
        </el-upload>
        
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="uplaoadFile">确 定</el-button>
        </span>
        </el-dialog>

     </div>
    
       

      
    
  </div>
 
</template>

<script>
import  api from '@/api/subject/subjectApi'
  export default {
   
    data() {
      return {
        centerDialogVisible: false,
        tableData: [],
        fileList: [],
        file: {},
      }
    },
   
    created(){
      
       this.getSubjectList()
    },
     methods: {
      getSubjectList(){
      
        api. getsubjectList()
        .then(response=>{
          this.tableData = response.data
        })

      },
      open() {
        this.$confirm('', '上传文件', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      removesubject(id){
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           api.removeSubject(id)
              .then(response =>{
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                  });
                  window.location.reload()
              }).catch(error =>{
                this.$message({
                  type: 'fail',
                  message: '删除失败!'
                });
              })
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
       

      },
      alterupadet(){
        this.centerDialogVisible=true;
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      getFile(item) {
      console.log(item.file)
      this.file = item.file
     },
     uplaoadFile(){
       const fd = new FormData()
        fd.append('filename', this.file)
        console.log(fd)
     }
      
    }

  }
</script>

<style>
.look_subject{
  width: 70%;
  margin: auto;
}
.change_subject{
  width: 70%;
  margin: 30px auto;

}
</style>

<style lang="scss" >
.el-button{
 margin-left: 5px;
} 

</style>

